/* color palette from <https://github.com/vuejs/theme> */
:root {
  --vt-c-white: #ffffff;
  --vt-c-white-soft: #f8f8f8;
  --vt-c-white-mute: #f2f2f2;

  --vt-c-black: #181818;
  --vt-c-black-soft: #222222;
  --vt-c-black-mute: #282828;

  --vt-c-indigo: #2c3e50;

    --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
    --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
    --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
    --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);

    --vt-c-text-light-1: var(--vt-c-indigo);
    --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
    --vt-c-text-dark-1: var(--vt-c-white);
    --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);

    --b-alpha-5: rgba(0, 0, 0, .05);
    --b-alpha-10: rgba(0, 0, 0, .1);
    --b-alpha-15: rgba(0, 0, 0, .15);
    --b-alpha-20: rgba(0, 0, 0, .2);
    --b-alpha-30: rgba(0, 0, 0, .3);
    --b-alpha-35: rgba(0, 0, 0, .35);
    --b-alpha-40: rgba(0, 0, 0, .4);
    --b-alpha-50: rgba(0, 0, 0, .5);
    --b-alpha-60: rgba(0, 0, 0, .6);
    --b-alpha-70: rgba(0, 0, 0, .7);
    --b-alpha-80: rgba(0, 0, 0, .8);
    --b-alpha-90: rgba(0, 0, 0, .9);
    --bg-filter: hsla(0, 0%, 96%, .7);
    --bg-w-active: #afafaf;
    --bg-w-hover: #cdcdcd;
    --bg-w-p: #fff;
    --bg-w-s: #f5f5f5;
    --bg-w-235: #f5f5f5;
    --foreground-color: rgba(0, 0, 0, .75);
    --gold-1: #ae7926;
    --gold-2: #c0933c;
    --gold-3: #d9b85d;
    --red: #dd524d;
    --theme-color: #06c;
    --txt-b-pure: #000;
    --txt-b-tip: rgba(0, 0, 0, .8);
    --txt-w-pure: #fff;
    --w-alpha-5: hsla(0, 0%, 100%, .05);
    --w-alpha-10: hsla(0, 0%, 100%, .1);
    --w-alpha-15: hsla(0, 0%, 100%, .15);
    --w-alpha-20: hsla(0, 0%, 100%, .2);
    --w-alpha-30: hsla(0, 0%, 100%, .3);
    --w-alpha-50: hsla(0, 0%, 100%, .5);
    --w-alpha-60: hsla(0, 0%, 100%, .6);
    --w-alpha-70: hsla(0, 0%, 100%, .7);
    --w-alpha-80: hsla(0, 0%, 100%, .8);
    --w-alpha-90: hsla(0, 0%, 100%, .9);
}

/* semantic color variables for this project */
:root {
  --color-background: var(--vt-c-white);
  --color-background-soft: var(--vt-c-white-soft);
  --color-background-mute: var(--vt-c-white-mute);

  --color-border: var(--vt-c-divider-light-2);
  --color-border-hover: var(--vt-c-divider-light-1);

  --color-heading: var(--vt-c-text-light-1);
  --color-text: var(--vt-c-text-light-1);

  --section-gap: 160px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--vt-c-black);
    --color-background-soft: var(--vt-c-black-soft);
    --color-background-mute: var(--vt-c-black-mute);

    --color-border: var(--vt-c-divider-dark-2);
    --color-border-hover: var(--vt-c-divider-dark-1);

    --color-heading: var(--vt-c-text-dark-1);
    --color-text: var(--vt-c-text-dark-2);
  }
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    position: relative;
    font-weight: normal;
}


body {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    background-color: var(--bg-w-235);
    color: var(--foreground-color);
    cursor: default;
    font-family: PingFang SC, Microsoft YaHei, sans-serif;
    margin: 0;
    -webkit-user-select: none;
    user-select: none;
}
